<!-- http://stackoverflow.com/questions/17859993/basic-css-how-to-overlay-a-div-with-semi-transparent-div-on-top -->
<!-- http://jsfiddle.net/EVSZQ/5/ -->
<html>
	<head>
		<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
		<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
		<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
		<style type="text/css">
			.hidden{
				display: none;
			}
			
			#workspace, #workspaceBackground{	
				width: 1000px;
				height: 800px;
				
				position : absolute;
				margin-top: 0px;
				margin-left: 0px;
			}
			
			#workspace img{
				z-index : 50;
			}
			
			#workspace div{
				z-index : 50;
			}
			
			#workspaceBackground{
				z-index : 0;
				background-color: white;//green;
			}
			
			#extendedCanvas, #extendedCanvasBorderOverlay{
				width: 800px;
				height: 600px;
				
				position : absolute;
				margin-top: 100px;
				margin-left: 100px;
				
				border: 1px solid red;
			}
			
			#extendedCanvas{
				z-index : 1;
				background-color: white;//yellow;
			}
			
			#extendedCanvasBorderOverlay{
				z-index: 200;
			}
			
			#canvas, #canvasBorderOverlay{
				width: 700px;
				height: 500px;
				
				position : absolute;
				margin-top: 150px;
				margin-left: 150px;
				
				border: 1px solid black;
			}
			
			#canvas{
				z-index : 2;
				background-color: white;//red;
			}
			
			#canvasBorderOverlay{
				z-index: 200;
			}
			
			#leftOverlay, #leftLeftOverlay, 
			#topOverlay, #topTopOverlay, 
			#rightOverlay, #rightRightOverlay, 
			#bottomOverlay, #bottomBottomOverlay{
				position : absolute;
				margin-top: 0px;
				margin-left: 0px;
			}
			
			#leftOverlay { /* Covers the left part of extended canvas */
				z-index : 100;
				
				width: 50px;
				margin-left: 100px;
				margin-top: 100px;
				height: 600px; /* Same as extended Canvas */
				background-color: rgba(248,248,255, 0.7);//rgba(230,26,26, 0.7);
			}
			
			#leftLeftOverlay { /* Covers the left part of the workspace */
				z-index : 101;
				
				width: 100px;
				height: 800px; /* Same as workspace */
				background-color: rgba(248,248,255, 0.9);//rgba(230,26,26, 0.9);
			}
			
			#topOverlay {
				z-index : 100;
				
				width: 700px; /* Same as canvas */ 
				margin-left: 150px;
				margin-top: 100px;
				height: 50px;
				background-color: rgba(248,248,255, 0.7);//rgba(230,26,26, 0.7);
			}
			
			#topTopOverlay {
				z-index : 101;
				
				width: 800px; /* Same as extended canvas */ 
				margin-left: 100px;
				height: 100px;
				background-color: rgba(248,248,255, 0.9);//rgba(230,26,26, 0.9);
			}
			
			#rightOverlay {
				z-index : 100;
				
				width: 50px;
				margin-left: 850px; /* 100 + 50 + 700 => workspace-left + extended canvas-left + width canvas  */
				margin-top: 100px;
				height: 600px; /* Same as extended Canvas */
				background-color: rgba(248,248,255, 0.7);//rgba(230,26,26, 0.7);
			}
			
			#rightRightOverlay {
				z-index : 101;
				
				width: 100px;
				margin-left: 900px;/* 100 + 800 => workspace-left + width extended canvas  */
				height: 800px; /* Same as workspace */
				background-color: rgba(248,248,255, 0.9);//rgba(230,26,26, 0.9);
			}
			
			#bottomOverlay {
				z-index : 100;
				
				width: 700px; /* Same as canvas */ 
				margin-left: 150px;
				margin-top: 650px; /* 100 + 50 + 500 => workspace-top + extended canvas-top + height canvas */
				height: 50px;
				background-color: rgba(248,248,255, 0.7);//rgba(230,26,26, 0.7);
			}
			
			#bottomBottomOverlay {
				z-index : 101;
				
				width: 800px; /* Same as extended canvas */ 
				margin-left: 100px;
				margin-top: 700px; /* 100 + 600 => workspace-top + height extended canvas */
				height: 100px;
				background-color: rgba(248,248,255, 0.9);//rgba(230,26,26, 0.9);
			}
		</style>
	</head>
	<body>
		<div id="test" >ok</div>
		<div id="imageUploadDialog">
			<iframe src="/fileUpload/upload.html" width="500" height="400"></iframe>
		</div>
		<button id="openDialogBtn">edit</button>
		<div id="workspaceDialog">
			<button id="openToolboxBtn">toolbox</button>
			<button id="uploadImageBtn">uploadImage</button>
			
			<div id="workspaceBackground"></div>
			<!-- Start overlays -->
			<div id="leftOverlay" class="overlayElement"></div>
			<div id="leftLeftOverlay" class="overlayElement"></div>
			<div id="topOverlay" class="overlayElement"></div>
			<div id="topTopOverlay" class="overlayElement"></div>
			<div id="rightOverlay" class="overlayElement"></div>
			<div id="rightRightOverlay" class="overlayElement"></div>
			<div id="bottomOverlay" class="overlayElement"></div>
			<div id="bottomBottomOverlay" class="overlayElement"></div>
			<div id="canvasBorderOverlay" class="overlayElement"></div>
			<div id="extendedCanvasBorderOverlay" class="overlayElement"></div>
			<!-- End overlays -->
			<div id="extendedCanvas"></div>
			<div id="canvas"></div>
			<div id="workspace">
				<!--img src="/canvas.jpg" width="200" height="200" /-->
			</div>
		</div>
		
		<div id="toolboxDialog">
			<div id="ee">test</div>
		</div>
		
		<script type="text/javascript">
			
			//imageUpload
			$("#imageUploadDialog").dialog({ autoOpen: false });
			$( "#imageUploadDialog" ).bind('dialogclose', function(event, ui) {
				var imageName = $(this).find("iframe").contents().find(".template-download .name a").html();
				$("#workspace").html('<img src="/fileUpload/server/php/files/' + imageName + '" width="200" height="200" />');
				init();
			});
			$( "#uploadImageBtn" ).click(function() {
			  $( "#imageUploadDialog" ).dialog( "open" );
			});
			
			init();
			function init(){
				initOverlayElementEvent();
				initBodyMouseMoveEvent();
				//workspace
				$( "#workspaceDialog" ).dialog({ autoOpen: false });
				$( "#workspaceDialog" ).dialog( "option", "height", $("#workspace").height() + 75);
				$( "#workspaceDialog" ).dialog( "option", "width", $("#workspace").width() + 50);
				$( "#workspaceDialog" ).on( "dialogclose", function(event, ui){
					$('#toolboxDialog').dialog('close');
				});
				$( "#openDialogBtn" ).click(function() {
				  $( "#workspaceDialog" ).dialog( "open" );
				});
				//toolbox
				$( "#toolboxDialog" ).dialog({ autoOpen: false });
				$( "#openToolboxBtn" ).click(function() {
				  $( "#toolboxDialog" ).dialog( "open" );
				});
				
			
				jQuery("#workspace img").resizable({
					handles: 'all',
					containment: $("#workspace"),
					start: function(event, ui){
						startEditingImage();
					},
					stop: function(event, ui){
						stopEditingImage();
					}
				}).parent().draggable({
					containment: $("#workspace"),
					start: function(event, ui){
						startEditingImage();
					},
					stop: function(event, ui){
						stopEditingImage();
					}
				});
				
				$('.overlayElement').on('mousedown', function(event){
					if(isMouseIn($('#workspace img'))){
						$('#workspace img').trigger(event);
					}
				});
				
				function startEditingImage(){
					$('body').unbind('mousemove');
					$('.overlayElement').unbind('mousemove');
					$('.overlayElement').each(function(){
						$(this).removeClass('hidden');
					});
				}
				
				function stopEditingImage(){
					initOverlayElementEvent();
					initBodyMouseMoveEvent();
				}
				
				function initOverlayElementEvent(){
					$('.overlayElement').on('mousemove', function(event){
						if(isMouseIn($('#workspace img'))){
							$('.overlayElement:not(.hidden)').each(function(){
								$(this).addClass('hidden');
							});
						}
						$('#workspace img').css("border", "1px solid black");
					});
				}
				
				function initBodyMouseMoveEvent(){
					//TODO make more performant
					$('body').on('mousemove', function(event){
						if(!isMouseIn($('#workspace img'))){
							$('.overlayElement.hidden').each(function(){
								$(this).removeClass('hidden');
							});
						}
					});
				}
				
				function isMouseIn(element){
					var gxstart = $(element).offset().left;
					var gxend = $(element).offset().left + $(element).width();
					var gystart = $(element).offset().top;
					var gyend = $(element).offset().top + $(element).height();  
					
					var mouseX = event.clientX;
					var mouseY = event.clientY;
					
					var mouseIsInElement = false;
					if( gxstart < mouseX ){
						if ( mouseX < gxend ){
							if(gystart < mouseY){
								if(mouseY < gyend){   
									mouseIsInElement = true;
								}
							}
						}
					}
					
					return mouseIsInElement;
				}
			}
		</script>
	</body>
</html>